<template>
	<scroll-view  class="scroll-content"
	scroll-y
	style="height: 100vh;"
	@scrolltolower="onScrollToLower">
    <view class="content">
        <view class="content-item" v-for="( item,index) in dataList" @click="toPage(item)">
            <view class="top">订单编号: {{item.orderNo}}</view>
            <view class="Photo-item">
                <view class="photo">
                    <image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
                </view>
                <view class="txt">
                    <view class="txt-top">
                        {{item.meal.setMealName}}
                    </view>
                    <view class="txt-bottom">
                        {{item.meal.packageDescription}}
                    </view>
                </view>
            </view>
            <view class="bottom-item">
                <view class="bottom">
                   {{item.date}} {{item.startTime}} - {{item.endTime}}
                </view>
                <view class="info" @click.stop="seeReopt(item)">查看体检报告</view>
            </view>
        </view>
          <image  v-if="!dataList.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
	</view>
   </scroll-view> 
</template>

<script>
	import order from "@/api/order";
	import {baseUrl} from "@/config.js"
    export default {
        data() {
            return {
                dataList: [],
                url:"",
				pageNum:1
            }
        },
		async onPullDownRefresh() {	
			    const res =  await order.getOrderList({status:2})
			    this.dataList = res.rows 
		        uni.stopPullDownRefresh();
		},
        methods: {
		   async onScrollToLower(){
				 this.pageNum++
				 console.log("触底了")
				  const res =  await order.getOrderList({status:2,pageNum:this.pageNum})
				     if(res.total<= this.dataList.length) return 
				     this.dataList = [...this.dataList,...res.rows]  
			},
            toPage(item) {
               uni.navigateTo({
               	url: `/subPages/testItem/testItem?data=${encodeURIComponent(JSON.stringify(item))}`,
               })
            },
		    seeReopt(item){
				    uni.navigateTo({
						 url: "/subPages/phyExaRep/phyExaRep?orderNo=" + item.orderNo,
					})
			}
        },
		 async onShow(){
			 this.url = baseUrl
			 //0未付款 1已付款 2已完成 3已退款 4已预约 5已关闭 6完成中
			 const res =  await order.getOrderList({status:2})
			 this.dataList = res.rows 
			 console.log(res)
		}
    }
</script>

<style scoped>
    .content {
        padding: 36rpx;
		
	   
    }

    .content-item {
        width: 686rpx;
        box-sizing: border-box;
        padding: 20rpx;
        height: 294rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-bottom: 20rpx;
    }

    .top {

        height: 34rpx;

        font-weight: 500;
        font-size: 24rpx;
        color: #333333;

    }

    .Photo-item {
        display: flex;
        margin-top: 10rpx;
    }

    .photo {
        width: 193rpx;
        height: 150rpx;
        background: #F6F6F6;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .txt {
        margin-left: 10rpx;
    }

    .txt-top {
        padding-top: 10rpx;
    }

    .txt-bottom {
        width: 334rpx;
        height: 68rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #626262;
        margin-top: 10rpx;
        text-align: left;
        font-style: normal;
        font-size: 24rpx;
        text-transform: none;
    }

    .info {
        margin-top: 20rpx;
        width: 160rpx;
        height: 50rpx;
        background: #159DFF;
        text-align: center;
        line-height: 50rpx;

        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 24rpx;
    }

    .bottom {
        
        height: 42rpx;
		padding: 0 8rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #159DFF;
        border: 1rpx solid #159DFF;
        text-align: left;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 28rpx;
        text-transform: none;

    }

    .bottom-item {
        display: flex;
        color: white;
        justify-content: space-between;
    }
</style>